import React, {useEffect, useState} from 'react'
import {
	Button,
	message,
	Input,
	Collapse,
	Form,
	Row,
	Col,
	Select,
	DatePicker,
} from 'antd'
import {history, connect} from 'umi'
import moment from 'moment'
import styles from './index.less'
import {viewList, editList, getDictInfo} from '@/service/carMessage/list'
import {
	isOperationType,
	licenseProperty,
	carType,
	warehouseType,
} from '../../../dict'
import {getDict} from '@/service/common/dict'
import UploadAvatar from '@/components/UploadAvatar'
import {getPublicDownloadUrl} from '@/service/common/upload'
import {twoDecimalPattern} from '@/utils/common/validator'
import 'moment/locale/zh-cn'

const {Panel} = Collapse
const customizeHeader = (value: string) => (
	<div>
		<div className={styles.tip} />
		{value}
	</div>
)
const listViewDom = (props: any) => {
	const [form] = Form.useForm()
	const [informationForm] = Form.useForm()
	const [businessForm] = Form.useForm()
	const [colorList, setColorList] = useState<any>([])
	const [seatMaterialList, setSeatMaterialList] = useState<any>([])
	const [interiorColorList, setInteriorColorList] = useState<any>([])
	const [useCharacterList, setUseCharacterList] = useState<any>([])
	const [fileList, setFileList] = useState<any>([])
	const {id} = props.location.query
	const [dict, setDict] = useState({
		star_rating: [],
	})
	// 初始化-附件列表
	const getFileList = (ids: any) => {
		getPublicDownloadUrl(ids).then((res: any) => {
			if (res?.success) {
				const list = res?.data.map((item: any) => ({
					name: item?.filename,
					status: 'done',
					url: item?.url,
					targetAttr: item?.targetAttr,
					response: {
						data: {
							id: item?.id,
						},
					},
				}))
				setFileList(() => [...list])
			}
		})
	}
	// 初始化-数据详情
	const getViewListFun = () => {
		viewList({carId: id}).then((res: any) => {
			if (res?.success) {
				const params = {
					...res?.data,
					photoUpdateTime: res?.data?.extend?.photoUpdateTime
						? moment(res?.data?.extend?.photoUpdateTime).format(
								'YYYY-MM-DD HH:mm:ss',
						  )
						: '',
					carPrepareNo: res?.data?.extend?.carPrepareNo,
					carProperty: res?.data?.extend?.carProperty,

					certInvLastUpdateTime: res?.data?.certInvLastUpdateTime
						? moment(res?.data?.certInvLastUpdateTime).format(
								'YYYY-MM-DD HH:mm:ss',
						  )
						: '',
					starRating: res?.data?.extend?.starRating,
					carBrandSeries: res?.data?.carCertificate?.carBrandSeries,
					firstDepartureTime: res?.data?.extend?.firstDepartureTime
						? moment(res?.data?.extend?.firstDepartureTime)
						: '',
					productionTime: res?.data?.productionTime
						? moment(res?.data?.productionTime)
						: '',
					qaExpireDate: res?.data?.qaExpireDate
						? moment(res?.data?.qaExpireDate)
						: '',
				}
				form.setFieldsValue(params)
				informationForm.setFieldsValue({
					...res?.data,
					...res?.data?.extend,
				})
				businessForm.setFieldsValue({
					...res?.data,
					holderName: res?.data?.extend?.holderName,
					companyName: res?.data?.extend?.companyName,
					cityName: res?.data?.extend?.cityName,
					operationType: res?.data?.extend?.operationType,
				})
				getFileList([
					res?.data?.carFront,
					res?.data?.carBehind,
					res?.data?.carLeft,
					res?.data?.carRight,
					res?.data?.invoice,
					res?.data?.certificate,
				])
			}
		})
	}
	const getDictInfoColorFun = () => {
		getDictInfo({type: 'color'}).then((res: any) => {
			if (res?.success) {
				setColorList(() => res?.data)
			}
		})
	}
	const getDictInfoSeatMaterialFun = () => {
		getDictInfo({type: 'seatMaterial'}).then((res: any) => {
			if (res?.success) {
				setSeatMaterialList(() => res?.data)
			}
		})
	}

	const getDictInfoInteriorColorFun = () => {
		getDictInfo({type: 'interiorColor'}).then((res: any) => {
			if (res?.success) {
				setInteriorColorList(() => res?.data)
			}
		})
	}
	const getDictInfoUseCharacterFun = () => {
		getDictInfo({type: 'useCharacter'}).then((res: any) => {
			if (res?.success) {
				setUseCharacterList(() => res?.data)
			}
		})
	}

	useEffect(() => {
		getDictInfoColorFun()
		getDictInfoSeatMaterialFun()
		getDictInfoInteriorColorFun()
		getDictInfoUseCharacterFun()
		getViewListFun()
		getDict(
			{
				dictKeys: ['star_rating'],
			},
			(res: any) => {
				setDict(() => res)
			},
		)
	}, [])

	// 前
	const carFrontUploadProps = {
		text: '添加文件',
		modelName: 'CARLIST_FJ',
		accept: 'jpeg,jpg,png',
		targetAttr: 5,
		list: fileList,
		moreNum: 1,
		callback: (res: any) => {
			form.setFieldsValue({
				carFront: res?.file?.response?.data?.id,
				photoUpdateTime: moment().format('YYYY-MM-DD HH:mm:ss'),
			})
		},
	}
	// 后
	const carBehindUploadProps = {
		text: '添加文件',
		modelName: 'CARLIST_FJ',
		accept: 'jpeg,jpg,png',
		targetAttr: 6,
		list: fileList,
		moreNum: 1,
		callback: (res: any) => {
			form.setFieldsValue({
				carBehind: res?.file?.response?.data?.id,
				photoUpdateTime: moment().format('YYYY-MM-DD HH:mm:ss'),
			})
		},
	}
	// 左
	const carLeftUploadProps = {
		text: '添加文件',
		modelName: 'CARLIST_FJ',
		accept: 'jpeg,jpg,png',
		targetAttr: 7,
		list: fileList,
		moreNum: 1,
		callback: (res: any) => {
			form.setFieldsValue({
				carLeft: res?.file?.response?.data?.id,
				photoUpdateTime: moment().format('YYYY-MM-DD HH:mm:ss'),
			})
		},
	}
	// 左
	const carRightUploadProps = {
		text: '添加文件',
		modelName: 'CARLIST_FJ',
		accept: 'jpeg,jpg,png',
		targetAttr: 8,
		list: fileList,
		moreNum: 1,
		callback: (res: any) => {
			form.setFieldsValue({
				carRight: res?.file?.response?.data?.id,
				photoUpdateTime: moment().format('YYYY-MM-DD HH:mm:ss'),
			})
		},
	}

	// 发票
	const invoiceUploadProps = {
		text: '添加文件',
		modelName: 'CARLIST_FJ',
		accept: 'jpeg,jpg,png',
		targetAttr: 1,
		list: fileList,
		moreNum: 1,
		callback: (res: any) => {
			form.setFieldsValue({
				invoice: res?.file?.response?.data?.id,
				certInvLastUpdateTime: moment().format('YYYY-MM-DD HH:mm:ss'),
			})
		},
	}

	// 合格证
	const certificateUploadProps = {
		text: '添加文件',
		modelName: 'CARLIST_FJ',
		accept: 'jpeg,jpg,png',
		targetAttr: 0,
		list: fileList,
		moreNum: 1,
		callback: (res: any) => {
			form.setFieldsValue({
				certificate: res?.file?.response?.data?.id,
				certInvLastUpdateTime: moment().format('YYYY-MM-DD HH:mm:ss'),
			})
		},
	}
	// 数据提交
	const submit = async () => {
		const formData = await form.validateFields()
		const initiationFormData = await informationForm.validateFields()
		const businessFormData = await businessForm.validateFields()
		// const [otherParams, setOtherParams] = useState<any>();

		const data: any = {
			...formData,
			...initiationFormData,
			...businessFormData,
			extend: {
				carPrepareNo: formData?.carPrepareNo,
				firstDepartureTime: moment(formData?.firstDepartureTime).format(
					'YYYY-MM-DD HH:mm:ss',
				),
				photoUpdateTime: moment(formData?.photoUpdateTime).format(
					'YYYY-MM-DD HH:mm:ss',
				),
				certInvLastUpdateTime: moment(
					formData?.certInvLastUpdateTime,
				).format('YYYY-MM-DD HH:mm:ss'),
				starRating: formData?.starRating,
			},
			carPrepareNo: formData?.carPrepareNo,
			firstDepartureTime: moment(formData?.firstDepartureTime).format(
				'YYYY-MM-DD HH:mm:ss',
			),
			photoUpdateTime: moment(formData?.photoUpdateTime).format(
				'YYYY-MM-DD HH:mm:ss',
			),
			certInvLastUpdateTime: moment(
				formData?.certInvLastUpdateTime,
			).format('YYYY-MM-DD HH:mm:ss'),
			productionTime: moment(formData?.productionTime).format(
				'YYYY-MM-DD HH:mm:ss',
			),
			qaExpireDate: moment(formData?.productionTime).format(
				'YYYY-MM-DD HH:mm:ss',
			),
			starRating: formData?.starRating,
		}
		editList(data)
			.then((res) => {
				if (res?.success) {
					message.success(res.msg)
					history.goBack()
				}
			})
			.catch((err) => {
				message.error(err)
			})
	}
	return (
		<div className={styles.page}>
			<div className={`${styles.content} ${styles.formDetils}`}>
				<Collapse
					defaultActiveKey={['1', '2', '3']}
					ghost
					expandIconPosition="end">
					<Panel header={customizeHeader('基础信息')} key="1">
						<Form
							form={form}
							name="form"
							layout="horizontal"
							labelCol={{flex: '200px'}}
							labelAlign="right"
							labelWrap
							initialValues={{remember: true}}
							autoComplete="off">
							<Row gutter={12}>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item label="车辆ID" name="carId">
										<Input placeholder="请输入" disabled />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item label="车架号" name="vin">
										<Input placeholder="请输入" disabled />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="品牌车系车型"
										name="carBrandSeries">
										<Input placeholder="请输入" disabled />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item label="车牌号" name="number">
										<Input placeholder="请输入" disabled />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="车牌性质"
										name="numberType">
										<Select
											disabled
											placeholder="请选择"
											fieldNames={{
												value: 'key',
												label: 'label',
											}}
											options={[...licenseProperty]}
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="发动机号"
										name="engineNumber">
										<Input placeholder="请输入" />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item label="车辆颜色" name="colorId">
										<Select
											placeholder="请选择"
											fieldNames={{
												value: 'value',
												label: 'valueName',
											}}
											options={[...colorList]}
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item label="车辆类型" name="type">
										<Select
											placeholder="请选择"
											fieldNames={{
												value: 'key',
												label: 'label',
											}}
											options={[...carType]}
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="生产日期"
										name="productionTime"
										rules={[{required: true}]}>
										<DatePicker
											placeholder="请选择"
											format="YYYY-MM-DD"
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="质保到期日期"
										name="qaExpireDate"
										rules={[{required: true}]}>
										<DatePicker
											placeholder="请选择"
											format="YYYY-MM-DD"
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="座椅材质"
										name="seatMaterialId"
										rules={[{required: true}]}>
										<Select
											placeholder="请选择"
											fieldNames={{
												value: 'value',
												label: 'valueName',
											}}
											options={[...seatMaterialList]}
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="内饰颜色"
										name="interiorColorId"
										rules={[{required: true}]}>
										<Select
											placeholder="请选择"
											fieldNames={{
												value: 'value',
												label: 'valueName',
											}}
											options={[...interiorColorList]}
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="车辆性质"
										name="carProperty">
										<Select
											disabled
											placeholder="请选择"
											fieldNames={{
												value: 'key',
												label: 'label',
											}}
											options={[...licenseProperty]}
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="购置税"
										name="purchaseTax"
										getValueFromEvent={
											(event: any) =>
												event.target.value.replace(
													/^(-)*(\d+)\.(\d\d).*$/,
													'$1$2.$3',
												) // 只能输入两位小数
										}
										rules={[
											{
												required: true,
												pattern: twoDecimalPattern,
												message: '请输入正确的购置税',
											},
										]}>
										<Input placeholder="请输入" />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="备车流程编号"
										name="carPrepareId">
										<Input placeholder="请输入" />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="采购价格"
										name="purchasePrice"
										getValueFromEvent={
											(event: any) =>
												event.target.value.replace(
													/^(-)*(\d+)\.(\d\d).*$/,
													'$1$2.$3',
												) // 只能输入两位小数
										}
										rules={[
											{
												required: true,
												pattern: twoDecimalPattern,
												message: '请输入正确的采购价格',
											},
										]}>
										<Input placeholder="请输入" />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="首次发车时间"
										name="firstDepartureTime"
										rules={[{required: true}]}>
										<DatePicker
											placeholder="请选择"
											showTime
											format="YYYY-MM-DD HH:mm:ss"
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="当前里程数"
										name="currentDistance"
										rules={[{required: true}]}>
										<Input placeholder="请输入" />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="车辆星级"
										name="starRating"
										rules={[{required: true}]}>
										<Select
											placeholder="请选择"
											fieldNames={{
												value: 'dictKey',
												label: 'dictValue',
											}}
											options={[...dict.star_rating]}
										/>
									</Form.Item>
								</Col>
								<Col sm={{span: 24}} />
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="车辆前"
										name="carFront"
										rules={[{required: true}]}>
										<UploadAvatar
											{...carFrontUploadProps}
										/>
										<Input placeholder="请输入" hidden />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="车辆后"
										name="carBehind"
										rules={[{required: true}]}>
										<UploadAvatar
											{...carBehindUploadProps}
										/>
										<Input placeholder="请输入" hidden />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="车辆照片最近更新时间"
										name="photoUpdateTime">
										<Input placeholder="请输入" disabled />
									</Form.Item>
								</Col>
								<Col sm={{span: 24}} />
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="车辆左"
										name="carLeft"
										rules={[{required: true}]}>
										<UploadAvatar {...carLeftUploadProps} />
										<Input placeholder="请输入" hidden />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="车辆右"
										name="carRight"
										rules={[{required: true}]}>
										<UploadAvatar
											{...carRightUploadProps}
										/>
										<Input placeholder="请输入" hidden />
									</Form.Item>
								</Col>
								<Col sm={{span: 24}} />
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="发票"
										name="invoice"
										rules={[{required: true}]}>
										<UploadAvatar {...invoiceUploadProps} />
										<Input placeholder="请输入" hidden />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="合格证"
										name="certificate"
										rules={[{required: true}]}>
										<UploadAvatar
											{...certificateUploadProps}
										/>
										<Input placeholder="请输入" hidden />
									</Form.Item>
								</Col>

								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="合格证/发票最近更新时间"
										name="certInvLastUpdateTime"
										rules={[{required: true}]}>
										<Input placeholder="请输入" disabled />
									</Form.Item>
								</Col>
							</Row>
						</Form>
					</Panel>
					<Panel header={customizeHeader('车辆仓库信息')} key="2">
						<Form
							form={informationForm}
							name="informationForm"
							layout="horizontal"
							labelCol={{flex: '200px'}}
							labelAlign="right"
							labelWrap
							initialValues={{remember: true}}
							autoComplete="off">
							<Row gutter={12}>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="验车入库时间"
										name="checkTime">
										<Input placeholder="请输入" disabled />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="最晚验车入库时间"
										name="lastCheckTime">
										<Input placeholder="请输入" disabled />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="到期日"
										name="carExpirationTime">
										<Input placeholder="请输入" disabled />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="入库里程数"
										name="stockInDistance"
										getValueFromEvent={
											(event: any) =>
												event.target.value.replace(
													/^(-)*(\d+)\.(\d\d).*$/,
													'$1$2.$3',
												) // 只能输入两位小数
										}
										rules={[
											{
												pattern: twoDecimalPattern,
												message:
													'请输入正确的入库里程数',
											},
										]}>
										<Input placeholder="请输入" />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="仓库类型"
										name="warehouseType">
										<Select
											disabled
											placeholder="请选择"
											fieldNames={{
												value: 'key',
												label: 'label',
											}}
											options={[...warehouseType]}
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="仓库名称"
										name="warehouseName">
										<Input placeholder="请输入" disabled />
									</Form.Item>
								</Col>
							</Row>
						</Form>
					</Panel>
					<Panel header={customizeHeader('业务信息')} key="3">
						<Form
							form={businessForm}
							name="businessForm"
							layout="horizontal"
							labelCol={{flex: '200px'}}
							labelAlign="right"
							labelWrap
							initialValues={{remember: true}}
							autoComplete="off">
							<Row gutter={12}>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item label="持有方" name="holderName">
										<Input placeholder="请输入" disabled />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="所属公司"
										name="companyName">
										<Input placeholder="请输入" disabled />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item label="所有人" name="owner">
										<Input placeholder="请输入" disabled />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item label="城市" name="cityName">
										<Input placeholder="请输入" disabled />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="使用性质"
										name="useCharacter">
										<Select
											placeholder="请选择"
											fieldNames={{
												value: 'value',
												label: 'valueName',
											}}
											options={[...useCharacterList]}
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="是否自营"
										name="operationType">
										<Select
											disabled
											placeholder="请选择"
											fieldNames={{
												value: 'key',
												label: 'label',
											}}
											options={[...isOperationType]}
										/>
									</Form.Item>
								</Col>
							</Row>
						</Form>
					</Panel>
				</Collapse>
				<div className={styles.wrap}>
					<Button
						onClick={() => {
							history.go(-1)
						}}>
						取消
					</Button>
					<Button type="primary" htmlType="submit" onClick={submit}>
						保存
					</Button>
				</div>
			</div>
		</div>
	)
}
export default connect(({user}: any) => ({user}))(listViewDom)
